<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Description" content="ThickBox is a webpage UI dialog widget written in javascript on top of the jQuery library. It's function is too show a single image, multiple images, inline content, iframed content, and content served through AJAX in a hybrid modal." />
<meta name="author" content="Cody Lindley" />
<meta name="robots" content="all" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta http-equiv="imagetoolbar" content="false" />

<title>ThickBox 3.1</title>

<style type="text/css" media="all">
@import "css/global.css";
@import "thickbox-code/thickbox.css";
</style>

<link rel="alternate stylesheet" type="text/css" href="css/1024.css" title="1024 x 768" />

<script src="js/jquery-1.1.3.1.pack.js" type="text/javascript"></script>
<script src="thickbox-code/thickbox-compressed.js" type="text/javascript"></script>
<script src="js/global.js" type="text/javascript"></script>
</head>

<body id="pageTop">

<div id="pageContent"><!-- pageContent -->
<h1>ThickBox <span>3.1</span></h1>
<div id="tag">developed by <a href="http://www.codylindley.com">Cody Lindley</a>, using <a href="http://www.jquery.com">jQuery</a>, last updated on 08/08/2007</div>
<div id="description">ThickBox is a webpage UI dialog widget written in JavaScript on top of the <a href="http://www.jquery.com">jQuery</a> library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through <a href="http://en.wikipedia.org/wiki/AJAX">AJAX</a> in a hybrid <a href="http://en.wikipedia.org/wiki/Modal_window">modal</a>.</div>

<ul id="navigation">
	<li class="divide"><a href="#overview" id="overviewBtn">Overview</a></li>
	<li class="divide"><a href="#examples" id="examplesBtn">Examples</a></li>
	<li class="divide"><a href="#qa" id="qaBtn">Q &amp; A</a></li>
	<li class="divide"><a href="#support" id="supportBtn">Support</a></li>
	<li><a href="#donate" id="donateBtn">Donate</a></li>
</ul>

<h2 id="overviewTitle"><span class="header">Overview</span><a href="#" rel="overview" class="toggleBtn" id="toggleBtnOverview">-</a></h2>
<div class="lineDivide">&nbsp;</div>

<div id="overview"><!-- overview -->

	<div class="roundbox">
		<h3>Features:</h3>
		<ul>
		<li>ThickBox was built using the super lightweight <a href="http://www.jquery.com">jQuery library</a>. Compressed, the jQuery library is <span class="callout">20k</span>, uncompressed it's 58k.</li>
		<li>The ThickBox JavaScript code and CSS file only add an additional 15k (only 10k by using the thickbox-compressed.js) on top of the jQuery code. The CSS file could additionally be compressed if need be. </li>
		<li>ThickBox will resize images that are bigger than the browser window.</li>
		<li>ThickBox offers versatility (images, iframed content, inline content, and AJAX content).</li>
		<li>ThickBox will hide form elements in Windows IE 6.</li>
		<li>ThickBox will remain centered in the window even when the user scrolls the page or changes the size of the browser window.  Clicking an image, the overlay, or close link will remove ThickBox.</li>
		<li>Due to the ThickBox creator's view that transitions should be tailored by individual authors, ThickBox windows do not implement fancy transitions.  Feel free to add them as you see fit. Is this a feature? Well, some might say it is. </li>
		<li>ThickBox can be invoked from a link element, input element (typically a button), and the area element (image maps).</li>
		</ul>
	</div>
	
	<div id="container-1" class="greyTabs">
		<ul class="anchors" style="width:100%">
			<li><a href="#sectiona-1">Download</a></li>
			<li><a href="#sectiona-2">code</a></li>
			<li><a href="#sectiona-3">css</a></li>
			<li><a href="#sectiona-4">gif</a></li>
			<li><a href="#sectiona-5">compressed code</a></li>
		</ul>
		<div id="sectiona-1" class="anchor">
			<p>
				Download <a href="thickbox-code/thickbox.js">thickbox.js</a> or <a href="thickbox-code/thickbox-compressed.js">thickbox-compressed.js</a>, <a href="thickbox-code/thickbox.css">ThickBox.css</a>, and the loading graphic (<a href="images/loadingAnimation.gif">loadingAnimation.gif</a>) to your local machine (or cut and paste the code from the tabs). Along with these three files, a copy of the <a href="http://jquery.com/src/jquery-latest.js">jQuery JavaScript library</a> is needed. For this site, and ThickBox, I am using the <a href="http://jquery.com/src/jquery-latest.pack.js">compressed version of jQuery.</a></p>
		</div>
		<div id="sectiona-2" class="anchor">
			<pre class="tabscode"><code class="javascript" id="ajaxJS">Loading...</code></pre>
		</div>
		<div id="sectiona-3" class="anchor">
			<pre class="tabscode"><code class="css" id="ajaxCSS">Loading...</code></pre>
		</div>
		<div id="sectiona-4" class="anchor">
		<h5>Right Click and Download:</h5>
			<p><img src="images/loadingAnimation.gif" alt="Loading Animation Image" /></p>	
		</div>
		<div id="sectiona-5" class="anchor">
			<pre class="tabscode"><code class="css" id="ajaxJSCompressed">Loading...</code></pre>
		</div>
	</div>
	<div style="clear:both; line-height:0; height:0">&nbsp;</div><!-- safari fix -->
	<div class="roundbox">
		<h3>How to Implement ThickBox:</h3>
			<p>Before you can implement ThickBox make sure the page that invokes ThickBox has a valid <a href="http://www.alistapart.com/articles/doctype/">DTD</a>. This is required for ThickBox to look and function correctly.</p>
			<p>1. ThickBox requires the jQuery JavaScript library; because of this, you will need to include the jquery.js file in the head element of your web page, followed by the thickbox.js file (NOTE: jquery.js must come first in the source order). Example below:</p>
			
<pre class="normal"><code class="html">&lt;script type=&quot;text/javascript&quot; src=&quot;path-to-file/jquery.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;path-to-file/thickbox.js&quot;&gt;&lt;/script&gt;</code></pre>
			
			<p>Once you have included the .js files, open <a href="thickbox-code/thickbox.js">thickbox.js</a> or <a href="thickbox-code/thickbox-compressed.js">thickbox-compressed.js</a> and locate the tb_pathToImage variable at the top of the page. Once you have found it, make sure to change the value of tb_pathToImage to the path where the <a href="images/loadingAnimation.gif">loadingAnimation.gif</a> file is located on your own server.</p>
			
			<p>2. Include the ThickBox CSS file in your web page. As of version 3.1 you will
				also need to update the path to the <a href="images/macFFBgHack.png">macFFBgHack.png</a> in the thickbox.css
				file. Example options below:</p>
			
			<pre class="normal"><code class="html">&lt;link rel=&quot;stylesheet&quot; href=&quot;path-to-file/thickbox.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /&gt;</code></pre>
			
			<p><strong>Or</strong></p>
			
			<pre class="normal"><code class="html">&lt;style type=&quot;text/css&quot; media=&quot;all&quot;&gt;@import &quot;path-to-file/thickbox.css&quot;;&lt;/style&gt;</code></pre>
			
			<p><strong>Or</strong>, open the <a href="thickbox-code/thickbox.css">thickbox.css</a> file
				and copy and paste the styles into an existing style sheet. Be
				aware that the ThickBox CSS file will remove the browsers default
				padding and margin for all elements.</p>
			
			<p>3. View the examples to learn the many different ways to use and invoke ThickBox functionality.</p>
	</div>
	
	<div class="roundbox">
		<h3>Supported &amp; Tested Browsers</h3>
		<p>Windows IE 6.0, Windows IE 7+, Windows FF 2.0.0.6+, Windows Opera 9.0+,
			Macintosh Safari 2.0.4+, Macintosh FF 2.0.0.6+, Macintosh Opera 9.10+</p>
	
	</div>
	
	<div class="roundbox">
	<h3>MIT License/GNU License</h3>
	<p><a href="http://www.opensource.org/licenses/mit-license.php">http://www.opensource.org/licenses/mit-license.php</a></p>
	<p><a href="http://www.gnu.org/licenses/gpl.html">http://www.gnu.org/licenses/gpl.html</a></p>
<p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the &quot;Software&quot;), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so.</p>
	</div>	
	
	<div class="roundbox">
		<h3 style="margin-bottom:0;">Change Log</h3>
		<div style="height:400px; overflow:auto;padding:10px 0;">

<p class="changeDate">As of 08/01/2007</p>
		<ul>
			<li>Added modal functionality to ThickBox iframes</li>
			<li>Fixed <a href="http://jakeo.org/blog/2007/03/16/css-opacity-and-flash-transparency-in-mac-firefox/">Flash transparency issue with Firefox on OSX</a></li>
			<li>Updated to jQuery 1.1.3.1</li>
			<li>Changed how inline content is handled in Thickbox. Instead of duplicating the inline content thickbox will now move it accordingly inside of the DOM</li>
			<li>Safari iframe source issue solved</li>
		</ul>

		<p class="changeDate">As of 05/02/2007</p>
		<ul>
			<li>If sizes are not set for width and/or height (inline, iframe, and ajax content), ThickBox will default to a width of 630px and a height of 440px</li>
<li>iframe hack to hide &amp;select&quot; elements now only runs in IE 6</li>
<li>Scrollbars are removed in IE 6 when a ThickBox is opened (to counter IE 6's errant width and height calculations)</li>
<li>Cleaned code using <a href="http://www.jslint.com/" title="JSLint">JSLint</a></li>
<li>A new compressed thickbox.js using <a href="http://dean.edwards.name/packer/" title="Packer">Packer</a></li>
<li>Updated ThickBox to use jQuery 1.1.2</li>
<li>Major updates to JavaScript and CSS to address scrolling and overlay issues</li>
<li>Replaced pre-loader image, and Pre-loader image is now being pre-loaded</li>
<li>ThickBox now works with image maps ("area" elements) and form buttons ("input" elements), just like links ("a" elements)</li>
<li>If you use Ajax content, ThickBox will now open new content in the current ThickBox. That is, after the content is loaded into a ThickBox (via Ajax), it will be parsed for any area, link, or input elements with a class of "thickbox". This will allow you to load new content into the current ThickBox</li>
<li>Added the ability to create a real modal window when using inline or Ajax content</li>
		</ul>
		<p class="changeDate">As of 1/24/2007</p>
		<ul>
			<li>Updated ThickBox to work with jQuery release 1.1.1</li>
		</ul>
		<p class="changeDate">As of 10/11/2006</p>
		<ul>
			<li>Updated jQuery code to release 1.0.2</li>
		</ul>
		<p class="changeDate">As of 10/09/2006</p>
		<ul>
			<li>Fixed scrolling issues with FireFox</li>
		</ul>
		<p class="changeDate">As of 09/23/2006</p>
		<ul>
			<li>Updated jQuery code to release 1.0.1</li>
			<li>The escape key will now close ThickBox</li>
			<li>Removed the necessity to have an extension to use the iframe content and ajax content (image content still requires an extension)</li>
			<li>When opening iframe content with ThickBox the window will only appear after the window has loaded its content (This will not work in Safari)</li>
			<li>Moved the next and previous keyboard functionality for the gallery images to the left &lt; key (previous) and right &gt; key (next). By doing this it fixes a known issue with safari and the arrow keys. This also allows sites design to be scrolled horizontally to use the arrow keys accordingly.</li>
			<li>ThickBox will now work with sites that scroll horizontally. So, a ThickBox, not matter if you scroll a website horizontally or vertically will always show up centered in the window.</li>
		</ul>
		<p class="changeDate">As of 08/07/2006</p>
		<ul>
			<li>Fixed height issue of transparent iframe to hide select elements in IE</li>
		</ul>
		<p class="changeDate">As of 08/03/2006</p>
		<ul>
			<li>Added greybox functionality (iframed content)</li>
			<li>Added titles to ThickBox for iframed, inline, and ajax content</li>
			<li>Added image gallery functions (with keyboard navigation by using the left and right arrow keys)</li>
			<li>New (separate) CSS file specifically for ThickBox </li>
			<li>Fixed Firefox caching issue when loading a ThickBox image for the first time</li>
			<li>Cleaned up and optimized the thickbox.js file</li>
			<li>Add the new file extension .bmp for ThickBox images</li>
			<li>Removed set height on ThickBox so two lines of caption will stretch the window vertically</li>
		</ul>
		<p class="changeDate">As of 07/06/2006</p>
		<ul>
			<li>Added the ability to use inline div elements to populate a ThickBox</li>
			<li>Added the ability to use uppercase and lowercase extensions</li>
			<li>Loading animation centers on the screen regardless of vertical scroll</li>
			<li>In IE, select boxes are now hidden when ThickBox is open</li>
			<li>Fixed a bug that occurs when no title is used on anchor elements</li>
			<li>Fixed overlay so that it covers the screen during the loading animation (occurred in FF and Opera)</li>
			<li>Uses the new jQuery 1.0 – Alpha Release</li>
		</ul>
		</div>
	</div>

	<div style="clear:both"><a href="#" class="BTT">back to top</a></div>
	
</div><!-- /overview -->

<h2 id="examplesTitle"><span class="header">Examples</span><a href="#" rel="examples" class="toggleBtn" id="toggleBtnExample">-</a></h2>
<div class="lineDivide">&nbsp;</div>

<div id="examples"><!-- examples -->

	<div id="container-2">
		<ul class="anchors" style="width:100%">
			<li><a href="#sectionb-1">Single Image</a></li>
			<li><a href="#sectionb-2">Demo</a></li>
			<li><a href="#sectionb-3">Demo html</a></li>
		</ul>
		<div id="sectionb-1" class="anchor">
			<h5 class="hfivepadding">Description:</h5>
			<p>
				This is the simplest example of ThickBox functionality. This example places a single image in a ThickBox (see demo tab).
			</p>
			<h5>Instructions:</h5>
			<ul>
				<li>Create a link element (&lt;a href&gt;)</li>
				<li>Give the link a class attribute with a value of thickbox (class=&quot;thickbox&quot;)</li>
				<li>Provide a path in the href attribute to an image file (.jpg .jpeg .png .gif .bmp)</li>
			</ul>
		</div>
		<div id="sectionb-2" class="anchor">
		<h5>Click On The Image:</h5>
			<p><a href="images/single.jpg" title="add a caption to title attribute / or leave blank" class="thickbox"><img src="images/single_t.jpg" alt="Image 2"/></a></p>
		</div>
		<div id="sectionb-3" class="anchor">
		<pre class="tabscode" style="height:50px;"><code class="html">&lt;a href=&quot;images/single.jpg&quot; title=&quot;add a caption to title attribute / or leave blank&quot; class=&quot;thickbox&quot;&gt;&lt;img src=&quot;images/single_t.jpg&quot; alt=&quot;Single Image&quot;/&gt;&lt;/a&gt;</code></pre>
		</div>
	</div>
	
	<div id="container-3">
		<ul class="anchors" style="width:100%">
			<li><a href="#sectionc-1">Gallery Images</a></li>
			<li><a href="#sectionc-2">Demo</a></li>
			<li><a href="#sectionc-3">Demo html</a></li>
		</ul>
		<div id="sectionc-1" class="anchor">
			<h5 class="hfivepadding">Description:</h5>
			<p>
				This example is exactly like the single image functionality except that it allows use of the rel attribute to group images together so they can be navigated in a ThickBox. The ideal usage would be for images galleries.
			</p>
			<h5>Instructions:</h5>
			<ul>
				<li>Create a link element (&lt;a href&gt;)</li>
				<li>Give the link a class attribute with a value of &quot;thickbox&quot; (class=&quot;thickbox&quot;)</li>
				<li>Provide a path in the href attribute to an image file (.jpg .jpeg .png .gif .bmp)</li>
				<li>Give each link element the same rel element and value. (Example: rel=&quot;gallery-plants&quot;)</li>
			</ul>
			<h5>Important to Remember:</h5>
			<p>While you have a ThickBox gallery image open, you can navigate forward and backward through the images by using the left &lt; key (previous) and right &gt; key (next) on the keyboard (Next and Previous links are also provided in the ThickBox). The images will appear in the gallery from first to last as they appear in the HTML document flow.</p>
		</div>
		<div id="sectionc-2" class="anchor">
		<h5 class="hfivepadding">Click An Image:</h5>
			<p>
			<a href="images/plant1.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant1_t.jpg" alt="Plant 1" /></a>
&nbsp;
<a href="images/plant2.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant2_t.jpg" alt="Plant 2" /></a>
&nbsp;
<a href="images/plant3.jpg" title="leave blank, or add caption to title attribute" class="thickbox" rel="gallery-plants"><img src="images/plant3_t.jpg" alt="Plant 3" /></a>
&nbsp;
<a href="images/plant4.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant4_t.jpg" alt="Plant 4" /></a>
			</p>
		</div>
		<div id="sectionc-3" class="anchor">
		<pre class="tabscode" style="height:100px;"><code class="html">&lt;a href=&quot;images/plant1.jpg&quot; title=&quot;add a caption to title attribute / or leave blank&quot; class=&quot;thickbox&quot; rel=&quot;gallery-plants&quot;&gt;&lt;img src=&quot;images/plant1_t.jpg&quot; alt=&quot;Plant 1&quot; /&gt;&lt;/a&gt;&nbsp;
&lt;a href=&quot;images/plant2.jpg&quot; title=&quot;add a caption to title attribute / or leave blank&quot; class=&quot;thickbox&quot; rel=&quot;gallery-plants&quot;&gt;&lt;img src=&quot;images/plant2_t.jpg&quot; alt=&quot;Plant 2&quot; /&gt;&lt;/a&gt;&nbsp;
&lt;a href=&quot;images/plant3.jpg&quot; title=&quot;add a caption to title attribute / or leave blank&quot; class=&quot;thickbox&quot; rel=&quot;gallery-plants&quot;&gt;&lt;img src=&quot;images/plant3_t.jpg&quot; alt=&quot;Plant 3&quot; /&gt;&lt;/a&gt;&nbsp;
&lt;a href=&quot;images/plant4.jpg&quot; title=&quot;add a caption to title attribute / or leave blank&quot; class=&quot;thickbox&quot; rel=&quot;gallery-plants&quot;&gt;&lt;img src=&quot;images/plant4_t.jpg&quot; alt=&quot;Plant 4&quot; /&gt;&lt;/a&gt;</code></pre>
		</div>
	</div>
	
	<div id="container-4">
		<ul class="anchors" style="width:100%">
			<li><a href="#sectiond-1">Inline Content</a></li>
			<li><a href="#sectiond-2">Demo</a></li>
			<li><a href="#sectiond-3">Demo html</a></li>
		</ul>
		<div id="sectiond-1" class="anchor">
			<h5 class="hfivepadding">Description:</h5>
			<p>
				Inline content on the page, either hidden or showing, can be placed in a ThickBox.
			</p>
			<h5>Instructions:</h5>
			<ul>
				<li>Create a link element (&lt;a href&gt;)</li>
				<li>Give the link a class attribute with a value of thickbox (class=&quot;thickbox&quot;)</li>
				<li>In the href attribute of the link add the following anchor: #TB_inline</li>
				<li>In the href attribute after the #TB_inline add the following query string on to the anchor: <pre class="exampleCode"><code class="html">?height=300&amp;width=300&amp;inlineId=myOnPageContent</code></pre></li>
				<li>Change the values of height, width, and inlineId in the query accordingly (inlineID is the ID value of the element that contains the content you would like to show in a ThickBox.</li>
				<li>Optionally you may add modal=true to the query string (e.g. #TB_inline?height=155&amp;width=300&amp;inlineId=hiddenModalContent&amp;modal=true) so that closing a ThickBox will require calling the tb_remove() function from within the ThickBox. See the hidden modal content example, where you must click yes or no to close the ThickBox.</li>
			</ul>
			<h5>Important to Remember:</h5>
			<p>If the inline content in the ThickBox contains more content than the ThickBox dimensions will show, a vertical scroll bar will appear so that the content can be scrolled. You can avoid having the scroll by making sure the ThickBox has the appropriate dimensions in order to show all of the inline content without having to scroll. In other words, if you don't want scroll bars, increase the height and width of the ThickBox until the content does not require scrolling.</p>
		</div>
		<div id="sectiond-2" class="anchor">
			<p style="padding-top:10px"><input alt="#TB_inline?height=150&amp;width=400&amp;inlineId=myOnPageContent" title="add a caption to title attribute / or leave blank" class="thickbox" type="button" value="Show" /> the paragraph and input below in a ThickBox, or <a href="#TB_inline?height=155&amp;width=300&amp;inlineId=hiddenModalContent&amp;modal=true" class="thickbox">Show hidden modal content.</a></p>
			<div id="myOnPageContent"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
			<p><select name=""><option>test</option></select></p>
			</div>
		</div>
		<div id="sectiond-3" class="anchor">
		<pre class="tabscode" style="height:50px;"><code class="html">&lt;input alt="#TB_inline?height=300&amp;width=400&amp;inlineId=myOnPageContent" title="add a caption to title attribute / or leave blank" class="thickbox" type="button" value="Show" /&gt;&nbsp;&nbsp;
&lt;a href="#TB_inline?height=155&amp;width=300&amp;inlineId=hiddenModalContent&amp;modal=true" class="thickbox"&gt;Show hidden modal content.&lt;/a&gt;</code></pre>
		</div>
	</div>
	
	<div id="container-5">
		<ul class="anchors" style="width:100%">
			<li><a href="#sectione-1">iFramed Content</a></li>
			<li><a href="#sectione-2">Demo</a></li>
			<li><a href="#sectione-3">Demo html</a></li>
		</ul>
		<div id="sectione-1" class="anchor">
			<h5 class="hfivepadding">Description:</h5>
			<p>
			Opens URL's in an iframe inside of ThickBox. Yes, this is <a href="http://amix.dk/greybox/demo.html">Greybox</a> functionality.</p>
			<h5>Instructions:</h5>
			<ul>
				<li>Create a link element (&lt;a href&gt;)</li>
				<li>Give the link a class attribute with a value of thickbox (class=&quot;thickbox&quot;)</li>
				<li>In the href attribute of the link provide the URL you would like to display in a ThickBox</li>
				<li>In the href attribute, after the URL, add the following query on to the end of the URL &amp; any parameters you might add: <pre class="exampleCode"><code class="html">?KeepThis=true&amp;TB_iframe=true&amp;height=400&amp;width=600</code></pre></li>
				<li>Change the values of height and width in the query accordingly</li>
				<li>Optionally you may add modal=true to the query string (e.g. ?KeepThis=true&amp;TB_iframe=true&amp;height=400&amp;width=600&amp;modal=true) so that closing a ThickBox will require calling the tb_remove() function from within the ThickBox iframe (self.parent.tb_remove()). See the iframe demo for an example, where you must click &quot;ok&quot; to close the ThickBox.</li>
			</ul>
			<h5>Important to Remember:</h5>
			<p>Add all other query parameters before the TB_iframe parameters. Everything after the &quot;TB&quot; is removed from the URL.</p>
		</div>
		<div id="sectione-2" class="anchor">
			<p><a href="ajax.PHP?keepThis=true&amp;TB_iframe=true&amp;height=250&amp;width=400" title="add a caption to title attribute / or leave blank" class="thickbox">Example 1</a>&nbsp;&nbsp;<a href="ajaxOverFlow.html?keepThis=true&amp;TB_iframe=true&amp;height=300&amp;width=500" title="add a caption to title attribute / or leave blank" class="thickbox">Example 2</a>&nbsp;&nbsp;<a href="iframeModal.html?placeValuesBeforeTB_=savedValues&amp;TB_iframe=true&amp;height=200&amp;width=300&amp;modal=true" title="add a caption to title attribute / or leave blank" class="thickbox">Open iFrame Modal</a></p>
			
<!--		<div style=""><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="100" height="100">
				<param name="movie" value="test.swf" />
				<param name="quality" value="high" />
				<param name="wmode" value="opaque">
				<embed src="test.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100" height="100" wmode="opaque"></embed>
		</object></div>-->
		
		</div>
		<div id="sectione-3" class="anchor">
		<pre class="tabscode" style="height:70px;"><code class="html">&lt;a href=&quot;ajax.PHP?keepThis=true&amp;TB_iframe=true&amp;height=250&amp;width=400&quot; title=&quot;add a caption to title attribute / or leave blank&quot; class=&quot;thickbox&quot;&gt;Example 1&lt;/a&gt;&nbsp;&nbsp;
&lt;a href=&quot;ajaxOverFlow.htm?keepThis=true&amp;TB_iframe=true&amp;height=300&amp;width=500&quot; title=&quot;add a caption to title attribute / or leave blank&quot; class=&quot;thickbox&quot;&gt;Example 2&lt;/a&gt;
&lt;a href="iframeModal.html?placeValuesBeforeTB_=savedValues&amp;TB_iframe=true&amp;height=200&amp;width=300&amp;modal=true" title="add a caption to title attribute / or leave blank" class="thickbox"&gt;Open iFrame Modal&lt;/a&gt;
</code></pre>
		</div>
	</div>

	<div id="container-6">
		<ul class="anchors" style="width:100%">
			<li><a href="#sectionf-1">AJAX Content</a></li>
			<li><a href="#sectionf-2">Demo</a></li>
			<li><a href="#sectionf-3">Demo html</a></li>
		</ul>
		<div id="sectionf-1" class="anchor">
			<h5 class="hfivepadding">Description:</h5>
			<p>
				Use a hidden HTTP request (AJAX) to fetch files from the same server and have ThickBox display the contents of the files.
			</p>
			<h5>Instructions:</h5>
			<ul>
				<li>Create a link element (&lt;a href&gt;)</li>
				<li>Give the link a class attribute with a value of thickbox (class=&quot;thickbox&quot;)</li>
				<li>Provide a path in the href to the file/directory on the server. (href=&quot;ajaxLogin.htm&quot;) </li>
				<li>In the href attribute, after the URL path to the file, add the following query on to the end of the URL: <pre class="exampleCode"><code class="html">?height=300&amp;width=300</code></pre></li>
				<li>Change the values of height and width in the query accordingly</li>
				<li>Optionally you may add modal=true to the query string (e.g. ?height=300&amp;width=300&amp;modal=true) so that closing a ThickBox will require calling the tb_remove() function from within the ThickBox. See the login example, where you must click cancel to close the ThickBox.</li>
			</ul>
		<h5>Important to Remember:</h5>
			<p>In order to open new Ajax content in an open Ajax ThickBox, its code must also contain the appropriate HTML (class=""thickbox) to launch an Ajax ThickBox (see demo for example). The only catch is, the ThickBox calls must include both the width and height of the original ThickBox. If you leave it blank the window will resize to the default size(630x440).</p>
		</div>
		<div id="sectionf-2" class="anchor">
			<p><a href="ajaxOverFlow.html?height=300&amp;width=400" title="add a caption to title attribute / or leave blank" class="thickbox">Scrolling content</a>&nbsp;&nbsp;
<a href="ajax.PHP?height=220&amp;width=400" class="thickbox" title="add a caption to title attribute / or leave blank">No-scroll content</a>&nbsp;&nbsp;
<a href="ajaxLogin.html?height=85&amp;width=250&amp;modal=true" class="thickbox" title="Please Sign In">login (modal)</a>
&nbsp;&nbsp;
<a href="ajaxTBcontent.html?height=200&amp;width=300" class="thickbox" title="">Update ThickBox content</a></p>
		</div>
		<div id="sectionf-3" class="anchor">
		<pre class="tabscode" style="height:100px;"><code class="html">&lt;a href=&quot;ajaxOverFlow.html?height=300&amp;width=300&quot; title=&quot;add a caption to title attribute / or leave blank&quot; class=&quot;thickbox&quot;&gt;Scrolling content&lt;/a&gt;&nbsp;&nbsp;
&lt;a href=&quot;ajax.PHP?height=220&amp;width=400&quot; class=&quot;thickbox&quot; title=&quot;add a caption to title attribute / or leave blank&quot;&gt;No-scroll content&lt;/a&gt;&nbsp;&nbsp;
&lt;a href="ajaxLogin.html?height=85&amp;width=250&amp;modal=true" class="thickbox" title="Please Sign In"&gt;login (modal)&lt;/a&gt;&nbsp;&nbsp;
&lt;a href="ajaxTBcontent.html?height=200&amp;width=300" class="thickbox" title=""&gt;Update ThickBox content&lt;/a&gt;</code></pre>
		</div>
	</div>

	<div style="clear:both"><a href="#" class="BTT">back to top</a></div>
</div><!-- /examples -->

<h2 id="qaTitle"><span class="header">Q &amp; A</span><a href="#" rel="qa" class="toggleBtn" id="toggleBtnQa">-</a></h2>
<div class="lineDivide">&nbsp;</div>

<div id="qa"><!-- Q & A -->

	<dl>
	<dd><strong>Question</strong> - I am using an older version of ThickBox. How do I upgrade?</dd>
	<dd><strong class="answer">Answer</strong> - I suggest stripping out the old CSS and JS and adding back in the new code created for the current version of ThickBox. If that is bad news, then hold tight - I have some good news, too. The way by which ThickBox is invoked has not changed. So, there is no need to change the HTML that invokes a ThickBox.</dd>
	</dl>
	
	<dl>
	<dd><strong>Question</strong> - Can I display Flash in a ThickBox?</dd>
	<dd><strong class="answer">Answer</strong> - In short, yes! However, I have not personally tested this yet. I have no idea of the browser quirks and support surrounding the usage of Flash in a ThickBox.</dd>
	</dl>
	
	<dl>
	<dd><strong>Question</strong> - Can a ThickBox appear over the top of my Flash content?</dd>
	<dd><strong class="answer">Answer</strong> - Yes! Have a look <a href="http://www.communitymx.com/content/article.cfm?cid=E5141">here</a> for a full explanation.</dd>
	</dl>
	
	<dl>
	<dd><strong>Question</strong> - If we use this code for a client, can we donate money to thank you for your efforts?</dd>
	<dd><strong class="answer">Answer</strong> - Yes, simply click on the &quot;Donate&quot; button in the next section to make a PayPal donation.</dd>
	</dl>
	
	<dl>
	<dd><strong>Question</strong> - Can a ThickBox be opened from another ThickBox?</dd>
	<dd><strong class="answer">Answer</strong> - Sort of, using an Ajax ThickBox you can update the content of the ThickBox. See the Ajax Demo Example. </dd>
	</dl>
	
	<dl>
	<dd><strong>Question</strong> - Can you view a PDF in a ThickBox?</dd>
	<dd><strong class="answer">Answer</strong> - The short of it is, yes! In fact, anything that can be viewed in a browser can also be viewed in a ThickBox using an iframe. Check out the iframe content example.</dd>
	</dl>
	
	<div style="clear:both;margin-top:20px;"><a href="#" class="BTT">back to top</a></div>
	
</div><!-- /Q & A -->

<h2 id="supportTitle"><span class="header">Support</span><a href="#" rel="support" class="toggleBtn" id="toggleBtnSupport">-</a></h2>
<div class="lineDivide">&nbsp;</div>
<div id="support"><!-- support -->
<p>ThickBox has received more attention than I had initially expected - so much so that I am a little overwhelmed with the notoriety and somewhat dumbfounded by all the individuals using it. Truthfully, I developed the solution as a proof of concept and personal endeavor to showcase the <a href="http://www.jquery.com">jQuery</a> library. With that said, I think I might owe some people an apology. ThickBox is not retail software. It has no support or documentation (except for this site). It’s the start of a great script and should be used as a launching point. If you see its potential, then the script was likely created for you. If, however, you only see the limitations of the solution, then honestly, the script is likely not for you. With that said, I am sorry that I do not have the time to respond to every email/comment requesting support. However, if you <a href="http://codylindley.com/contact/">send a detailed email</a> of the issue, along with the browser(s) and operating system(s) the issue is occurring in, the chances of getting direct support will increase significantly. In addition to emailing me directory, and the choice for support I would recommend, you can visit and pillaged the <a href="http://codylindley.com/thickboxforum/">ThickBox Forum</a> for peer support.</p>

<p>If past development is any indication, ThickBox will likely morph into another version in the future. If at that point it can stand alone as useful to you, then use it. However, as of today please do not expect a great deal of support for a script that was really never meant to be a complete software solution. Remember, this stuff is free. If it so happens to come wrapped with great documentation and support, then even better, but please don't assume that it should.</p>

	<div style="clear:both"><a href="#" class="BTT">back to top</a></div>
</div><!-- /support -->

<h2 id="donateTitle"><span class="header">Donate</span><a href="#" rel="donate" class="toggleBtn" id="toggleBtnDonate">-</a></h2>
<div class="lineDivide">&nbsp;</div>

<div id="donate"><!-- donate -->

		<p>Knowledge is its own reward. While its true that my own personal enjoyment and education continues to thrive as I develop ThickBox, a little bit of cash for a rainy day never hurt anyone. So, if you're feeling gracious and would like to improve my monetary situation out of gratitude, or maybe because my work on ThickBox has helped you monetarily, you can give me a little cash for all my hard work by clicking on the &quot;PayPal Donate&quot; button below and send me some cha-ching. Of course, this is not necessary, even if you plan on using ThickBox commercially. As I said, knowledge is its own reward.</p> 
		<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but04.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
" />
</form>
			<div style="clear:both;margin-top:20px;"><a href="#" class="BTT">back to top</a></div>
</div><!-- /donate -->


<div id="credits"><!-- credits -->
<div class="lineDivideSolid">&nbsp;</div>
<p>This site was designed &amp; built by <a href="http://www.codylindley.com">Cody Lindley</a> with <a href="http://www.jquery.com">jQuery</a>, <a href="http://themaninblue.com/writing/perspective/2006/01/19/">Resolution dependent layout</a>, <a href="http://stilbuero.de/2006/05/13/accessible-unobtrusive-javascript-tabs-with-jquery/">Accessible, unobtrusive JavaScript tabs with jQuery</a>, <a href="http://methvin.com/jquery/jq-corner-demo.html">JQuery Corner Styler</a>, <a href="http://www.eyecon.ro/interface/">Interface elements for jQuery</a>, <a href="http://www.danwebb.net/">Dan Webb - CodeHighlighter 0.2</a>, <a href="http://icant.co.uk/sandbox/jquerycodeview/">Dynamic Code Viewing with jQuery</a>, and plenty of patience. Before you cut and paste any of the JavaScript found on this site, you should know that I altered/optimized the previously mentioned scripts specifically for this site. Also, no images were <span style=" text-decoration:line-through">killed</span> used during the development of this site (except for the images in the examples).</p>
</div><!-- /credits -->

</div><!-- /pageContent -->

<div id="hiddenModalContent" style="display:none">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p style="text-align:center"><input type="submit" id="Login" value="&nbsp;&nbsp;Ok&nbsp;&nbsp;" onclick="tb_remove()" /></p>
</div>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-162561-1";
urchinTracker();
</script>

</body>
</html>
